<!--template-->
<template>
  <div class="timeline">
    <el-timeline :hide-timestamp="true">
      <el-timeline-item placement="bottom">
        <div class="time_stamp">
          <span>2018/4/12 20:46</span>
          <router-link :to="{ name: 'timelineLog' }">
            <span class="blue_clr ct">张三</span>
          </router-link>
          <span>车辆资料</span>
        </div>
        <el-card>
          <ul>
            <li>
              <span class="lb">操作类型</span>
              <span>分离车辆</span>
            </li>
            <li>
              <span class="lb">车辆信息</span>
              <span>鲁A 8888888</span>
            </li>
          </ul>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="bottom">
        <div class="time_stamp">
          <span>2018/4/12 20:46</span>
          <router-link :to="{ name: 'timelineLog' }">
            <span class="blue_clr ct">张三</span>
          </router-link>
          <span>货源调度</span>
        </div>
        <el-card>
          <ul>
            <li>
              <span class="lb">操作类型</span>
              <span>认领任务</span>
            </li>
            <li>
              <span class="lb">货源信息</span>
              <router-link :to="{ name: 'timelineDetail' }">
                <span class="blue_clr ct">张飞/18512546035</span>
                <span class="blue_clr">油盐酱醋茶</span>
              </router-link>
            </li>
          </ul>
        </el-card>
      </el-timeline-item>
      <el-timeline-item placement="bottom">
        <div class="time_stamp">
          <span>2018/4/12 20:46</span>
          <span class="blue_clr ct">张三</span>
          <span>车辆资料</span>
        </div>
        <el-card>
          <ul>
            <li>
              <span class="lb">操作类型</span>
              <span>更改货源信息</span>
            </li>
            <li>
              <span class="lb">旧字段值</span>
              <span>目的地</span>
              <span>福建厦门</span>
            </li>
            <li>
              <span class="lb">新字段值</span>
              <span>目的地</span>
              <span>黑龙江牡丹江</span>
            </li>
          </ul>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.timeline {
  padding: 20px 0;
  .time_stamp {
    span {
      line-height: 22px;
      &:nth-child(1) {
      }
      &.ct {
        cursor: pointer;
        margin: 0 15px;
      }
      &:nth-child(3) {
      }
    }
  }
  .el-card {
    margin-top: 8px;
    width: 65%;
    /deep/ .el-card__body {
      padding: 10px;
    }
    ul > li {
      padding: 3px 0;
      span {
        line-height: 22px;
        &.lb {
          font-size: 14px;
          color: #787878;
        }
      }
    }
  }
}
</style>